<template>
  <div>
    <div v-for="(item, index) in textList"
     :key="index"
     class="tw-libtext"
     :class="{xhang: isSingle}">
      <div class="tw-libtext-content" v-html="item.content"></div>
    </div>
    <div class="tw-libnodata" v-if="textList.length === 0"></div>
   </div>
</template>

<script>
import props from './props'

export default {
  name: 'header-navigate',

  props,

  data() {
    return {
      collapsed: true
    }
  },

  computed: {
    style () {
      return {
        padding: this.padding,
        lineHeight: this.lineHeight,
        letterSpacing: this.letterSpacing,
        fontFamily: this.fontFamily,
        fontSize: this.fontSize,
        fontWeight: this.fontWeight ? '700' : '400',
        bgColor: this.bgColor,
        color: this.color,
        align: this.align,
        highlightTextFontSize: this.highlightTextFontSize,
        highlightTextColor: this.highlightTextColor,
        collapseBtnColor: this.collapseBtnColor,
        navSpacing: this.navSpacing,
        isSingle: this.isSingle,
        textRadius: this.textRadius
      }
    }
  },

  methods: {
    setStyle () {
      const style = `
        ::root .tw-libtext {
          letter-spacing: ${this.letterSpacing};
          text-shadow: 0 2px ${this.shadow};
          background-color: ${this.bgColor};
          border-radius: ${this.textRadius};
        }

        ::root .tw-libtext i {
          font-size: ${this.highlightTextFontSize};
          color: ${this.highlightTextColor};
          font-weight: ${this.highlightTextIsBold ? '700' : '400'};
        }

        ::root .tw-libtext .tw-libtext-btn {
          color: ${this.collapseBtnColor};
          border-color: ${this.collapseBtnColor};
        }

        ::root .tw-libtext .tw-libtext-btn:after {
          border-left-color:  ${this.collapseBtnColor};
          border-bottom-color:  ${this.collapseBtnColor};
        }

        ::root .tw-libtext .tw-libtext-content {
          color: ${this.color};
          margin-bottom: ${this.navSpacing};
          font-size: ${this.fontSize};
          font-weight: ${this.fontWeight ? '700' : '400'};
          padding: ${this.padding};
          line-height: ${this.lineHeight};
          letter-spacing: ${this.letterSpacing};
          font-family: ${this.fontFamily};
          text-align: ${this.align}
        }
      `

      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    }
  },

  mounted () {
    this.setStyle()
  },

  watch: {
    highlightTextIsBold () {
      this.setStyle()
    },

    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
